<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="http://10.5.21.118/libjs/echarts.min.js"></script>
    <script src="http://10.5.21.118/libjs/jquery-1.11.1.min.js"></script>
    <script src="http://10.5.21.118/libjs/echarts-wordcloud.min.js"></script>
    <style>
     *{
        margin: 0;
        padding: 0;
    }
    div{
        width:100%;
        height: 100%;
        position: absolute;
    }
        </style>

</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        $.get('word.json').done(function (data) {
                // 填入数据
                alert(data.data);
                myChart.setOption({
					tooltip: {},
					series: [ {
						type: 'wordCloud',
						gridSize: 2,
						sizeRange: [12, 50],
						rotationRange: [-90, 90],
						shape: 'pentagon',
						width: 600,
						height: 400,
						textStyle: {
							normal: {
								color: function () {
									return 'rgb(' + [
										Math.round(Math.random() * 160),
										Math.round(Math.random() * 160),
										Math.round(Math.random() * 160)
									].join(',') + ')';
								}
							},
							emphasis: {
								shadowBlur: 10,
								shadowColor: '#333'
							}
						},
						data: data.data
				}]
			});

        });
	window.onresize = myChart.resize;
    </script>
</body>
</html>
